<template>
  <view class="mask" v-show="show" @touchmove.stop.prevent>
    <view class="modal">
      <!-- 顶部图片 -->
      <image class="top-img" src="./img/img.png" mode="aspectFill" />

      <!-- 内容区域 -->
      <view class="content">
        <text class="title">发现新版本 V{{ newVision }}</text>
        <view class="log">{{log}}</view>

        <!-- 升级按钮 -->
        <button v-if="!pressShow" class="btn" @click="startUpdate">立即升级</button>

        <!-- 下载进度 -->
        <view v-else class="progress">
          <view class="bar-bg">
            <view class="bar-progress" :style="{ width: pressValue + '%' }"></view>
          </view>
          <text class="progress-text">
            下载进度: {{ (downSize/1024/1024).toFixed(2) }}M / {{ (fileSize/1024/1024).toFixed(2) }}M
          </text>
        </view>
      </view>

      <!-- 关闭按钮 -->
     <image class="close-icon" src="./img/close.png" @click="close" />
    </view>
  </view>
</template>

<script>
export default {
  name: "UpdateModal",
  props: {
    upLoadUrl: {
      type: String,
      default: "",
    },
    newVision: {
      type: String,
      default: "1.0.0",
    },
    appStoreUrl: {
      type: String,
      default: "",
    },
    show:{
      type: Boolean,
      default:false
    },
    log:{
      type: String,
      default: "优化",
    }
  },
  data() {
    return {
      pressShow: false, //进度条显示
      downSize: null, //下载文件大小
      pressValue: null, //下载百分比
      fileSize: null, //文件总大小
      uploadPopShow: false,
    };
  },
  created(){

  },
  methods: {
    startUpdate() {
      if (!this.upLoadUrl) {
        uni.showToast({
          title: "未检测到下载地址",
          icon: "none"
        })
        return
      }
      if (uni.getSystemInfoSync().platform === 'ios') {
        plus.runtime.launchApplication({
          action: this.appStoreUrl
        }, function(e) {
          console.log('Open system default browser failed: ' + e.message);
        });
        return
      }
      let that = this
      that.pressShow = true
      that.downloadTask = uni.downloadFile({
        url: that.upLoadUrl, //仅为示例，并非真实的资源
        success: (res) => {
          console.info(res)
          if (res.statusCode === 200) {
            that.pressShow = false
            that.uploadPopShow = false
            this.$emit("close")
            // #ifdef APP-PLUS
            plus.runtime.install(res.tempFilePath)
            // #endif
          } else {
            uni.showToast({
              title: "安装包下载失败!请联系管理员。",
              icon: "none"
            })
          }
        }
      });

      that.downloadTask.onProgressUpdate((res) => {
        that.downSize = res.totalBytesWritten
        that.fileSize = res.totalBytesExpectedToWrite
        that.pressValue = res.progress
      });
    },
    close() {
      this.isDownloading = false;
      if (this.downloadTask) this.downloadTask.abort();
      this.$emit("close");
    }
  }
};
</script>

<style lang="scss" scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  z-index: 9999;
}

.modal {
  position: relative;
  width: 480rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.top-img {
  position: absolute;
  width: 100%;
  height: 256rpx;
  top: -128rpx;
  left: 0;
}

.content {
  margin-top: 140rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  height: 100%; /* 最大高度，可根据需要调整 */
  overflow-y: auto;    /* 内容超出显示滚动条 */
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #6526f3;
}

.log {
  font-size: 24rpx;
  color: #666;
  text-align: left;
  padding: 40rpx;
  white-space: pre-wrap;

  /* 解决空内容撑高问题 */
  min-height: 50rpx;   /* 最小高度 */
  max-height: 200rpx;  /* 最大高度，内容超出滚动 */
  overflow-y: auto;
}

.btn {
  width: 460rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 100px;
  background-color: #6526f3;
  color: #fff;
  text-align: center;
  font-size: 30rpx;
}

.progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bar-bg {
  width: 460rpx;
  height: 30rpx;
  background-color: #ccc;
  border-radius: 100px;
  position: relative;
}

.bar-progress {
  height: 100%;
  background-color: #5674e5;
  border-radius: 100px;
}

.progress-text {
  font-size: 24rpx;
  color: #5674e5;
  margin-top: 16rpx;
}

.close-icon {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  width: 70rpx;
  height: 70rpx;
  z-index: 10;
}
</style>
